package showcase

import "github.com/templui/templui/internal/components/rating"

templ RatingStyles() {
	<div class="flex flex-col gap-4">
		@rating.Rating(rating.Props{
			Value: 2,
		}) {
			@rating.Group() {
				for i := 1; i <= 5; i++ {
					@rating.Item(rating.ItemProps{
						Value: i,
						Style: rating.StyleStar,
					})
				}
			}
		}
		@rating.Rating(rating.Props{
			Value: 3,
		}) {
			@rating.Group() {
				for i := 1; i <= 5; i++ {
					@rating.Item(rating.ItemProps{
						Value: i,
						Style: rating.StyleHeart,
					})
				}
			}
		}
		@rating.Rating(rating.Props{
			Value: 4,
		}) {
			@rating.Group() {
				for i := 1; i <= 5; i++ {
					@rating.Item(rating.ItemProps{
						Value: i,
						Style: rating.StyleEmoji,
					})
				}
			}
		}
	</div>
}
